<template>
  <a-page-header
    style="border: 1px solid rgb(235, 237, 240)"
    title="已做题目解析"
    sub-title="题目解析"
    @back="$router.push({ name: 'ExamFinish', params: { examId } })"
  >
    <a-checkbox v-model:checked="checkFailed"> 筛选错题 </a-checkbox>
  </a-page-header>

  <a-row type="flex" justify="center" v-for="(item, index) in filteredResult" :key="index" style="margin-top: 10px">
    <a-col :span="18">
      <a-card>
        <template #title>
          <a-tag color="green" v-if="item.user_score === item.score"> 正确 </a-tag>
          <a-tag color="red" v-else> 错误 </a-tag>
          【{{ questionType[item.type] }}】{{ index + 1 }}. {{ item.title }}
        </template>
        <div v-html="item.content"></div>
        <a-divider />
        <p
          v-for="option in JSON.parse(item.options)"
          :class="{
            correct: JSON.parse(item.answer).indexOf(option.option) >= 0,
          }"
          :key="option.option"
        >
          {{ option.option }} - {{ option.content }}
        </p>
        <a-divider />
        <p>
          你的答案
          <a-tag color="blue" v-for="answer in JSON.parse(item.user_answer)" :key="answer">{{ answer }}</a-tag>
        </p>
        <p>
          正确答案
          <a-tag color="green" v-for="answer in JSON.parse(item.answer)" :key="answer">{{ answer }}</a-tag>
        </p>
      </a-card>
    </a-col>
  </a-row>
</template>

<script>
import { computed, defineComponent, onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import { getExamResult } from "../../utils/api";

export default defineComponent({
  setup() {
    const route = useRoute();
    const examId = route.params["examId"];
    const questionList = ref([]);
    const checkFailed = ref(false);
    const filteredResult = computed(() => {
      // 选中筛选
      let result = questionList.value;
      if (checkFailed.value) {
        result = questionList.value.filter((item) => item.user_score !== item.score);
      }
      return result;
    });

    const fetchExamResult = () => {
      getExamResult(examId).then((res) => {
        questionList.value = res.data.data;
      });
    };

    onMounted(() => {
      fetchExamResult();
    });

    return {
      questionType: ["", "单选题", "多选题", "判断题"],
      checkFailed,
      examId,
      filteredResult,
    };
  },
});
</script>

<style scoped>
.correct {
  background-color: #52c41a;
}
.failed {
  background-color: #ffa39e;
}
</style>
